<template>
  <div class="health-assessment">
    <el-row :gutter="20">
      <!-- 左侧：健康能力评估 Tab 区 -->
      <el-col :span="20">
        <div class="main-title">健康能力评估</div>
        <el-tabs v-model="activeTab" type="card" class="custom-tabs">
          <!-- 健康评估 Tab -->
          <el-tab-pane label="健康评估" name="health">
            <el-form ref="healthFormRef" :model="healthForm" :rules="healthRules" label-width="120px">
              <div class="section-title">疾病和用药情况</div>
              <el-form-item label="*疾病诊断" prop="diseases">
                <el-checkbox-group v-model="healthForm.diseases">
                  <el-row :gutter="10">
                    <el-col :span="6" v-for="(disease, idx) in diseaseOptions" :key="idx">
                      <el-checkbox :label="disease">{{ disease }}</el-checkbox>
                    </el-col>
                  </el-row>
                </el-checkbox-group>
              </el-form-item>

              <el-form-item label="用药情况" prop="medicines">
                <el-table :data="healthForm.medicines" border style="width: 100%" size="mini">
                  <el-table-column label="药物名称" prop="name">
                    <template #default="{ row }">
                      <el-input v-model="row.name" placeholder="请输入" max-length="20" show-word-limit />
                    </template>
                  </el-table-column>
                  <el-table-column label="服药方法" prop="method">
                    <template #default="{ row }">
                      <el-input v-model="row.method" placeholder="请输入" max-length="20" show-word-limit />
                    </template>
                  </el-table-column>
                  <el-table-column label="用药剂量" prop="dosage">
                    <template #default="{ row }">
                      <el-input v-model="row.dosage" placeholder="请输入" max-length="20" show-word-limit />
                    </template>
                  </el-table-column>
                  <el-table-column label="操作" width="80">
                    <template #default="{ $index }">
                      <el-button icon="Minus" circle size="small" type="danger" @click="removeMedicineRow($index)" />
                      <el-button icon="Plus" circle size="small" type="primary" @click="addMedicineRow($index)"
                        class="ml-2" />
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>

              <div class="section-title">近30天风险事件</div>
              <el-form-item label="*跌倒" prop="fall">
                <el-radio-group v-model="healthForm.fall">
                  <el-radio label="无" />
                  <el-radio label="发生过1次" />
                  <el-radio label="发生过2次" />
                  <el-radio label="发生过3次以上" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="*走失" prop="lost">
                <el-radio-group v-model="healthForm.lost">
                  <el-radio label="无" />
                  <el-radio label="发生过1次" />
                  <el-radio label="发生过2次" />
                  <el-radio label="发生过3次以上" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="*噎食" prop="choke">
                <el-radio-group v-model="healthForm.choke">
                  <el-radio label="无" />
                  <el-radio label="发生过1次" />
                  <el-radio label="发生过2次" />
                  <el-radio label="发生过3次以上" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="*自杀" prop="suicide">
                <el-radio-group v-model="healthForm.suicide">
                  <el-radio label="无" />
                  <el-radio label="发生过1次" />
                  <el-radio label="发生过2次" />
                  <el-radio label="发生过3次以上" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="*昏迷" prop="coma">
                <el-radio-group v-model="healthForm.coma">
                  <el-radio label="无" />
                  <el-radio label="发生过1次" />
                  <el-radio label="发生过2次" />
                  <el-radio label="发生过3次以上" />
                </el-radio-group>
              </el-form-item>

              <div class="section-title">身体健康情况</div>
              <el-form-item label="*伤口情况" prop="wound">
                <el-checkbox-group v-model="healthForm.wound">
                  <el-checkbox label="无" />
                  <el-checkbox label="擦伤" />
                  <el-checkbox label="烧烫伤" />
                  <el-checkbox label="术后伤口" />
                  <el-checkbox label="糖尿病足溃疡" />
                  <el-checkbox label="血管性溃疡" />
                  <el-checkbox label="其他伤口" />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="*特殊医疗照护情况" prop="medicalCare">
                <el-checkbox-group v-model="healthForm.medicalCare">
                  <el-checkbox label="无" />
                  <el-checkbox label="胃管" />
                  <el-checkbox label="尿管" />
                  <el-checkbox label="气管切开" />
                  <el-checkbox label="无创呼吸机" />
                  <el-checkbox label="透析" />
                  <el-checkbox label="胃/肠/膀胱造瘘" />
                  <el-checkbox label="其他" />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="*自理能力" prop="selfCare">
                <el-radio-group v-model="healthForm.selfCare">
                  <el-radio label="不能自理" />
                  <el-radio label="轻度依赖" />
                  <el-radio label="中度依赖" />
                  <el-radio label="可自理" />
                </el-radio-group>
              </el-form-item>
              <el-form-item label="*痴呆前兆" prop="dementiaSign">
                <el-checkbox-group v-model="healthForm.dementiaSign">
                  <el-checkbox label="行为异常" />
                  <el-checkbox label="记忆障碍" />
                  <el-checkbox label="日常生活能力减退" />
                  <el-checkbox label="呆坐" />
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="其他" prop="other">
                <el-input v-model="healthForm.other" placeholder="请输入" max-length="20" show-word-limit />
              </el-form-item>

              <div class="section-title">近期体检报告</div>
              <el-form-item label="*体检报告" prop="medicalReport">
                <el-upload class="pdf-uploader" :action="uploadUrl" :headers="uploadHeaders" :accept="'.pdf'" :limit="1"
                  :on-success="handleUploadSuccess" :on-error="handleUploadError" :before-upload="beforeUpload"
                  v-model:file-list="healthForm.medicalReport">
                  <el-button type="primary">上传PDF文件（≤60M）</el-button>
                  <template #tip>
                    <div class="el-upload__tip">仅支持 PDF 格式，大小不超过 60MB</div>
                  </template>
                </el-upload>
              </el-form-item>

              <el-form-item class="mt-4">
                <el-button @click="handleReturn('health')">返回</el-button>
                <el-button type="primary" @click="handleSave('health')" class="ml-4">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>

          <!-- 能力评估 Tab -->
          <el-tab-pane label="能力评估" name="ability">
            <div class="module-title">能力评估</div>

            <!-- 使用 el-form 保持一致 -->
            <el-form ref="abilityFormRef" label-width="0">
              <!-- 分类分组 -->
              <div v-for="(group, gIndex) in groupedQuestions" :key="gIndex" class="question-group">
                <div class="group-title">{{ group.category }}</div>

                <!-- 每道题 -->
                <div v-for="(item, index) in group.questions" :key="index" class="ability-question">
                  <div class="question-header">
                    <span class="question-title">{{ index + 1 }}. {{ item.question }}</span>
                    <span class="question-score">得分：{{ item.score ?? 0 }}</span>
                  </div>

                  <!-- 选项 -->
                  <el-radio-group v-model="item.selected"
                    @change="val => updateScore(item, item.options.findIndex(o => o.label === val))">
                    <div v-for="opt in item.options" :key="opt.label" class="option-item">
                      <el-radio :label="opt.label">{{ opt.label }}. {{ opt.text }}</el-radio>
                    </div>
                  </el-radio-group>
                </div>
              </div>

              <!-- 操作按钮 -->
              <el-form-item style="margin-top: 20px;">
                <el-button @click="handleReturn('ability')">返回</el-button>
                <el-button type="primary" @click="handleSave('ability')" class="ml-4">保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>


          <!-- 评估报告 Tab -->
          <el-tab-pane label="评估报告" name="report">
            <div class="report-container">
              <div class="section-title">能力评估结果</div>
              <el-descriptions column="3" bordered class="mt-2">
                <el-descriptions-item label="自理能力得分（分）">{{ reportForm.selfCareScore }}</el-descriptions-item>
                <el-descriptions-item label="精神状态得分（分）">{{ reportForm.mentalScore }}</el-descriptions-item>
                <el-descriptions-item label="感知觉与社会参与得分（分）">{{ reportForm.socialScore }}</el-descriptions-item>
                <el-descriptions-item label="评估总分（分）">{{ reportForm.totalScore }}</el-descriptions-item>
                <el-descriptions-item label="能力初步等级">{{ reportForm.initialLevel }}</el-descriptions-item>
              </el-descriptions>

              <div class="section-title mt-4">护理等级结果</div>
              <el-form ref="reportFormRef" :model="reportForm" :rules="reportRules" label-width="120px" class="mt-2">
                <el-form-item label="*能力等级变更依据" prop="changeBasis">
                  <el-checkbox-group v-model="reportForm.changeBasis">
                    <el-row :gutter="20">
                      <el-col :span="8">
                        <el-checkbox label="已诊断疾病超过3项" />
                      </el-col>
                      <el-col :span="8">
                        <el-checkbox label="风险事件超过3次" />
                      </el-col>
                      <el-col :span="8">
                        <el-checkbox label="长期处于昏迷状态" />
                      </el-col>
                      <el-col :span="8">
                        <el-checkbox label="认知障碍/痴呆" />
                      </el-col>
                      <el-col :span="8">
                        <el-checkbox label="精神类疾病" />
                      </el-col>
                      <el-col :span="8">
                        <el-checkbox label="其他">
                          <el-input v-model="reportForm.otherBasis" placeholder="请输入"
                            style="width: 180px; margin-left: 8px;" maxlength="100" show-word-limit />
                        </el-checkbox>
                      </el-col>
                    </el-row>
                  </el-checkbox-group>
                </el-form-item>

                <el-form-item label="*能力最终等级" prop="finalLevel">
                  <el-radio-group v-model="reportForm.finalLevel">
                    <el-radio label="能力完好" />
                    <el-radio label="轻度失能" />
                    <el-radio label="中度失能" />
                    <el-radio label="中重度失能" />
                    <el-radio label="重度失能" />
                  </el-radio-group>
                </el-form-item>

                <el-form-item>
                  <el-button @click="handleReturn('report')">返回</el-button>
                  <el-button type="primary" @click="handleSubmit" :loading="submitting" class="ml-4">提交</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-col>

      <!-- 右侧：操作记录区 -->
      <el-col :span="4">
        <div class="operation-panel">
          <div class="panel-title">操作记录</div>
          <ul class="record-list">
            <!-- 动态渲染操作记录 -->
            <li v-for="(record, idx) in operationRecords" :key="idx">
              <div class="record-header">
                <span class="record-action">{{ record.taskName }}</span>
                <span class="record-time">{{ formatTime(record.endTime) }}</span>
              </div>
              <div class="record-desc">{{ record.userName }} ({{ record.status }})</div>
            </li>
            <!-- 空数据提示 -->
            <li v-if="operationRecords.length === 0" class="empty-record">
              <div class="record-desc">暂无操作记录</div>
            </li>
          </ul>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, toRaw, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { review } from '@/api/checkInApply/checkInApply'
import { getToken } from "@/utils/auth";
import { useRoute } from 'vue-router'
import { onMounted } from 'vue';
import { getApprovalRecord } from '@/api/checkInApply/checkInApply'

const props = defineProps({
  taskId: { type: String, required: true },
  processInstanceId: { type: String, required: true }
})
const uploadUrl = 'http://localhost:8080/common/upload'
const activeTab = ref('health')
const submitting = ref(false)
const uploadHeaders = { Authorization: "Bearer " + getToken() };

// 操作记录（改为响应式空数组）
const operationRecords = ref([]);

// 时间格式化函数：处理ISO时间格式，无时间时显示“正在处理”
const formatTime = (isoTime) => {
  if (!isoTime) return '正在处理';
  return new Date(isoTime).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-'); // 确保月份和日期用减号分隔
};

onMounted(() => {
  // 获取审批记录并格式化操作记录
  getApprovalRecord({ businessId: props.processInstanceId }).then(res => {
    if (res.code === 200 && res.data && res.data.length) {
      // 格式化接口数据为渲染所需结构
      operationRecords.value = res.data.map(item => ({
        taskName: item.taskInfo.name, // 任务名称
        endTime: item.taskInfo.endTime, // 原始结束时间（用于判断状态）
        userName: item.userInfo.userName, // 操作人用户名
        status: item.taskInfo.endTime ? '已完成' : '正在处理' // 任务状态
      }));
    }
  }).catch(err => {
    ElMessage.error('获取操作记录失败：' + (err.message || '网络错误'));
  });
})

const handleUploadSuccess = (response, file, fileList) => {
  if (response.code === 200) {
    healthForm.medicalReport = [{ name: file.name, url: response.url }]
    ElMessage.success('上传成功')
  } else {
    ElMessage.error(response.msg || '上传失败')
  }
}

const handleUploadError = () => {
  ElMessage.error('上传失败，请重试')
}

// 检查能力评估的所有题目是否都已选择答案
const validateAbilityForm = () => {
  const unAnswered = abilityQuestions.value.find(q => q.selected === '');
  if (unAnswered) {
    ElMessage.warning(`请回答：${unAnswered.question}`);
    return false;
  }
  return true;
};

const beforeUpload = (file) => {
  const isPDF = file.type === 'application/pdf'
  const isLt60M = file.size / 1024 / 1024 < 60
  if (!isPDF) ElMessage.error('只能上传 PDF 文件')
  if (!isLt60M) ElMessage.error('文件大小不能超过 60MB')
  return isPDF && isLt60M
}

// 健康评估表单
const healthForm = reactive({
  diseases: [],
  medicines: [{ name: '', method: '', dosage: '' }],
  fall: '',
  lost: '',
  choke: '',
  suicide: '',
  coma: '',
  wound: [],
  medicalCare: [],
  selfCare: '',
  dementiaSign: [],
  other: '',
  medicalReport: []
})

const diseaseOptions = [
  "无疾病", "冠心病I25.1", "糖尿病E10-E14", "肺炎J14",
  "高血压I10", "癫痫G40", "艾滋病B24", "慢性肾功能衰竭N18-N19",
  "脑出血I60-I62", "脑梗塞I63", "尿路感染", "帕金森综合征G20-G22",
  "消化道出血K20-K31", "肿瘤C00-D48", "截肢（6个月内）", "骨折（3个月内）"
]

// 用药行操作
const addMedicineRow = (index) => { healthForm.medicines.splice(index + 1, 0, { name: '', method: '', dosage: '' }) }
const removeMedicineRow = (index) => {
  if (healthForm.medicines.length > 1) healthForm.medicines.splice(index, 1)
  else ElMessage.warning('至少保留一行数据')
}

// 能力评估表单
const abilityQuestions = ref([
  {
    category: "自理能力",
    question: "进食",
    prop: "eat",
    options: [
      { label: "A", text: "完全依赖（不能自行进食）" },
      { label: "B", text: "需要大部分协助" },
      { label: "C", text: "需要少量协助" },
      { label: "D", text: "基本能独立进食" },
      { label: "E", text: "完全独立进食" }
    ],
    selected: "",
    score: null
  },
  {
    category: "自理能力",
    question: "洗漱",
    prop: "wash",
    options: [
      { label: "A", text: "完全依赖他人" },
      { label: "B", text: "需要较多协助" },
      { label: "C", text: "能部分完成" },
      { label: "D", text: "基本能独立完成" },
      { label: "E", text: "完全独立完成" }
    ],
    selected: "",
    score: null
  },
  {
    category: "自理能力",
    question: "修饰",
    prop: "dress",
    options: [
      { label: "A", text: "完全依赖" },
      { label: "B", text: "需要较多协助" },
      { label: "C", text: "能部分完成" },
      { label: "D", text: "能独立完成大部分" },
      { label: "E", text: "完全独立完成" }
    ],
    selected: "",
    score: null
  },

  // 精神状态
  {
    category: "精神状态",
    question: "记忆力",
    prop: "memory",
    options: [
      { label: "A", text: "完全丧失，无法回忆" },
      { label: "B", text: "经常遗忘" },
      { label: "C", text: "偶尔遗忘" },
      { label: "D", text: "轻微遗忘，不影响生活" },
      { label: "E", text: "记忆良好" }
    ],
    selected: "",
    score: null
  },
  {
    category: "精神状态",
    question: "情绪状态",
    prop: "emotion",
    options: [
      { label: "A", text: "情绪严重不稳或抑郁" },
      { label: "B", text: "经常焦虑或易怒" },
      { label: "C", text: "偶尔情绪波动" },
      { label: "D", text: "大多数时候平稳" },
      { label: "E", text: "情绪稳定积极" }
    ],
    selected: "",
    score: null
  },
  {
    category: "精神状态",
    question: "定向力",
    prop: "orientation",
    options: [
      { label: "A", text: "完全迷失方向" },
      { label: "B", text: "经常分不清时间地点" },
      { label: "C", text: "偶尔混乱" },
      { label: "D", text: "轻度混乱但能纠正" },
      { label: "E", text: "完全清楚" }
    ],
    selected: "",
    score: null
  },

  // 感知觉与社会参与
  {
    category: "感知觉与社会参与",
    question: "听觉",
    prop: "hearing",
    options: [
      { label: "A", text: "完全听不见" },
      { label: "B", text: "只能听到大声或靠近声音" },
      { label: "C", text: "需要助听设备辅助" },
      { label: "D", text: "轻度听力下降" },
      { label: "E", text: "听力正常" }
    ],
    selected: "",
    score: null
  },
  {
    category: "感知觉与社会参与",
    question: "视力",
    prop: "vision",
    options: [
      { label: "A", text: "完全看不见" },
      { label: "B", text: "只能辨别光影" },
      { label: "C", text: "能看清近处但模糊" },
      { label: "D", text: "轻度视力下降" },
      { label: "E", text: "视力正常" }
    ],
    selected: "",
    score: null
  },
  {
    category: "感知觉与社会参与",
    question: "语言表达",
    prop: "speech",
    options: [
      { label: "A", text: "无法交流" },
      { label: "B", text: "仅能使用少量词汇" },
      { label: "C", text: "交流受限但能表达" },
      { label: "D", text: "轻度不清" },
      { label: "E", text: "表达清晰" }
    ],
    selected: "",
    score: null
  },
  {
    category: "感知觉与社会参与",
    question: "社会交往",
    prop: "social",
    options: [
      { label: "A", text: "完全不参与社交" },
      { label: "B", text: "极少社交" },
      { label: "C", text: "偶尔社交" },
      { label: "D", text: "经常社交" },
      { label: "E", text: "积极参与社会活动" }
    ],
    selected: "",
    score: null
  }
])

const groupedQuestions = computed(() => {
  const groups = {}
  abilityQuestions.value.forEach(q => {
    if (!groups[q.category]) groups[q.category] = []
    groups[q.category].push(q)
  })
  return Object.keys(groups).map(k => ({ category: k, questions: groups[k] }))
})

const levelStandards = [
  { name: "能力完好", standard: "总分10" },
  { name: "轻度失能", standard: "总分11-20" },
  { name: "中度失能", standard: "总分21-30" },
  { name: "中重度失能", standard: "总分31-40" },
  { name: "重度失能", standard: "总分41-50" }
];

// 分数计算相关
const sectionScores = ref({
  自理能力: 0,
  精神状态: 0,
  感知觉与社会参与: 0,
  总分: 0,
  等级: ""
});

const reportForm = reactive({
  selfCareScore: 0,
  mentalScore: 0,
  socialScore: 0,
  totalScore: 0,
  initialLevel: '',
  changeBasis: [],
  otherBasis: '',
  finalLevel: ''
})

// 表单引用
const healthFormRef = ref(null)
const abilityFormRef = ref(null)
const reportFormRef = ref(null)

// 校验规则
const healthRules = {
  diseases: [{ required: true, message: '请选择疾病诊断', trigger: 'change' }],
  fall: [{ required: true, message: '请选择跌倒情况', trigger: 'change' }],
  lost: [{ required: true, message: '请选择走失情况', trigger: 'change' }],
  choke: [{ required: true, message: '请选择噎食情况', trigger: 'change' }],
  suicide: [{ required: true, message: '请选择自杀情况', trigger: 'change' }],
  coma: [{ required: true, message: '请选择昏迷情况', trigger: 'change' }],
  wound: [{ required: true, message: '请选择伤口情况', trigger: 'change' }],
  medicalCare: [{ required: true, message: '请选择特殊医疗照护情况', trigger: 'change' }],
  selfCare: [{ required: true, message: '请选择自理能力', trigger: 'change' }],
  dementiaSign: [{ required: true, message: '请选择痴呆前兆', trigger: 'change' }],
  medicalReport: [{ required: false, message: '请上传体检报告', trigger: 'change' }]
}

const reportRules = {
  finalLevel: [{ required: true, message: '请选择能力最终等级', trigger: 'change' }]
}

// 方法
const handleReturn = (tab) => {
  if (tab === 'health') activeTab.value = 'health'
  else if (tab === 'ability') activeTab.value = 'health'
  else if (tab === 'report') activeTab.value = 'ability'
}

const handleSave = (tab) => {
  if (tab === 'health') {
    healthFormRef.value.validate(valid => {
      if (valid) {
        // operationRecords.value.unshift({
        //   taskName: '健康评估-保存',
        //   userName: '当前用户',
        //   status: '已保存',
        //   endTime: new Date().toISOString()
        // });
        ElMessage.success('已保存');
        activeTab.value = 'ability';
      } else {
        ElMessage.warning('请填写健康评估的必填项');
      }
    });
  } else if (tab === 'ability') {
    const isAllAnswered = validateAbilityForm();
    if (isAllAnswered) {
      // operationRecords.value.unshift({
      //   taskName: '能力评估-保存',
      //   userName: '当前用户',
      //   status: '已保存',
      //   endTime: new Date().toISOString()
      // });
      ElMessage.success('已保存');
      activeTab.value = 'report';
    }
  }
};

// 提交函数
const submitAssessment = async () => {
  try {
    submitting.value = true
    const payload = {
      taskId: props.taskId,
      processInstanceId: props.processInstanceId,
      elder: {
        healthAssessment: toRaw(healthForm),
        abilityAssessment: toRaw(abilityQuestions.value),
        assessmentReport: toRaw(reportForm)
      }
    }
    await review(payload)
    // operationRecords.value.unshift({
    //   taskName: '评估报告-提交',
    //   userName: '当前用户',
    //   status: '已提交',
    //   endTime: new Date().toISOString()
    // })
    ElMessage.success('提交成功，等待下一步处理')
  } catch (error) {
    ElMessage.error(error?.message || '提交失败')
  } finally {
    submitting.value = false
  }
}

const handleSubmit = () => {
  reportFormRef.value.validate(valid => {
    if (valid) submitAssessment()
    else ElMessage.warning('请填写必填项')
  })
}

// 更新选项分数
function updateScore(question, optionIndex) {
  question.score = optionIndex + 1; // A=1, B=2...
  calculateScores();
}

// 计算总分和等级
function calculateScores() {
  const grouped = {
    自理能力: 0,
    精神状态: 0,
    感知觉与社会参与: 0
  };
  abilityQuestions.value.forEach(q => {
    if (q.score) grouped[q.category] += q.score;
  });

  sectionScores.value.自理能力 = grouped.自理能力;
  sectionScores.value.精神状态 = grouped.精神状态;
  sectionScores.value.感知觉与社会参与 = grouped.感知觉与社会参与;
  sectionScores.value.总分 =
    grouped.自理能力 + grouped.精神状态 + grouped.感知觉与社会参与;

  const t = sectionScores.value.总分;
  if (t <= 10) sectionScores.value.等级 = "能力完好";
  else if (t <= 20) sectionScores.value.等级 = "轻度失能";
  else if (t <= 30) sectionScores.value.等级 = "中度失能";
  else if (t <= 40) sectionScores.value.等级 = "中重度失能";
  else sectionScores.value.等级 = "重度失能";

  reportForm.selfCareScore = sectionScores.value.自理能力;
  reportForm.mentalScore = sectionScores.value.精神状态;
  reportForm.socialScore = sectionScores.value.感知觉与社会参与;
  reportForm.totalScore = sectionScores.value.总分;
  reportForm.initialLevel = sectionScores.value.等级;
}
</script>

<style scoped>
.health-assessment {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 40px)
}

.main-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #333;
  padding-left: 4px
}

.section-title,
.module-title {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 12px;
  color: #333;
  padding-left: 4px
}

.custom-tabs {
  --el-tabs-card-border-radius: 4px;
  margin-bottom: 20px
}

.ability-question {
  margin-bottom: 20px;
  padding: 12px;
  background-color: #f9f9f9;
  border-radius: 4px
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px
}

.question-title {
  font-weight: 500;
  color: #333
}

.question-score {
  color: #409eff;
  font-weight: 500
}

.option-item {
  margin-bottom: 6px;
  margin-left: 10px
}

.operation-panel {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  height: calc(100vh - 80px);
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05)
}

.panel-title {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #333;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee
}

.record-list {
  list-style: none;
  padding: 0;
  margin: 0
}

.record-list li {
  padding: 12px 0;
  border-bottom: 1px solid #eee;
  transition: background-color 0.2s
}

.record-list li:hover {
  background-color: rgba(255, 255, 255, 0.5)
}

.record-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px
}

.record-action {
  font-size: 13px;
  color: #333;
  line-height: 1.4
}

.record-time {
  font-size: 12px;
  color: #999;
  white-space: nowrap
}

.record-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.4
}

/* 空记录样式 */
.empty-record {
  padding: 12px 0;
  text-align: center;
  color: #999;
  font-size: 12px;
}

.ml-2 {
  margin-left: 4px
}

.ml-4 {
  margin-left: 16px
}

.mt-4 {
  margin-top: 16px
}

.pdf-uploader {
  margin-top: 8px
}

.el-upload__tip {
  margin-top: 4px;
  font-size: 12px;
  color: #999
}

.report-container {
  padding: 16px;
  background: #f9f9f9;
  border-radius: 8px
}

.el-descriptions {
  --el-descriptions-item-padding: 10px 16px
}

.el-descriptions-item__label {
  font-weight: 600;
  color: #444
}

.el-descriptions-item__content {
  color: #666
}

.el-row {
  margin-bottom: 8px
}

.question-group {
  margin-bottom: 25px;
}

.group-title {
  font-weight: bold;
  font-size: 18px;
  color: #409eff;
  margin-bottom: 10px;
}

.ability-question {
  margin-bottom: 15px;
  padding-left: 10px;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.question-title {
  font-weight: 500;
}

.option-item {
  margin-left: 10px;
  margin-bottom: 4px;
}
</style>